<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: #F5F5F5;
        }

        .tab-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: #fff;
        }

        .tab-container .item {
            height: 100%;
            padding: 0 25px;
            font-size: 14px;
            font-weight: 400;
            color: #5A5A5A;
        }

        .tab-container .active {
            position: relative;
            height: 100%;
            margin: 0 25px;
            font-size: 14px;
            font-weight: 500;
            color: #5AC2FF;
        }

        .tab-container .active::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 2px;
            width: 100%;
            height: 3px;
            border-radius: 2px;
            background-color: #5AC2FF;
        }

        .list-container {
            padding: 0 15px;
            background-color: #fff;
        }

        .item-container {
            padding: 15px 0;
            border-top: 1px solid #EFEFEF;
        }

        .item-container:first-child {
            border-top: none;
        }

        .item-container .title {
            font-size: 16px;
            font-weight: 500;
            color: #191919;
            overflow: hidden;
        }

        .text-dark {
            margin-top: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #808080;
            line-height: 17px;
            overflow: hidden;
        }

        .text-gray {
            margin-top: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #BFBFBF;
            line-height: 17px;
            overflow: hidden;
        }

        .icon-arrow {
            width: 15px;
            height: 15px;
            min-width: 15px;
            margin-left: 10px;
        }

        .btn-delete {
            width: 68px;
            height: 30px;
            line-height: 30px;
            min-width: 68px;
            background-color: #FAFAFA;
            border-radius: 15px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            margin-left: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="tab-container" data-flex="main:center">
            <div :class="tabActive === index ? 'active' : 'item'" @click="tabActive = index" data-flex="cross:center"
                v-for="item,index in tabList">
                {{item}}
            </div>
        </div>
        <div style="height: 40px;"></div>
        <div class="list-container">
            <div class="item-container" v-for="item,index in listData" @click="handleItem(item)" data-flex="cross:center">
                <div data-flex-box="1">
                    <div class="title one-line">{{item.courseWareName}}</div>
                    <div class="text-dark one-line">课件数量:{{item.contentNum}}</div>
                    <div class="text-gray one-line">{{item.signName}}</div>
                </div>
                <img v-if="tabActive === 0" src="../../image/ui/ar_gray.png" alt="" class="icon-arrow">
                <div v-else class="btn-delete" @click="deleteItem(item, index)">删除</div>
            </div>
        </div>
        <div class="data-null" data-flex="main:center" v-show="loadEnd && !listData.length">没有更多数据了</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, current, currentIndex;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');

        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                listData: [],
                pageNo: 1,
                pageSize: 10,
                tabActive: 0,
                tabList: ['已上架', '已下架'],
                loadEnd: false
            },
            watch: {
                tabActive: function() {
                    vm.listData = [];
                    getPageData('headerRefreshing');
                }
            }
        });
        load();
    }

    function load() {
        getPageData('headerRefreshing');
        fnAddHeaderRefreshingEvent(function () { //设置下拉刷新
            getPageData('headerRefreshing');
        });

        fnAddFooterLoadingEvent(function () { // 设置上拉加载
            getPageData('load');
        });

    }

    // 获取页面数据
    function getPageData(sign) {
        if (sign == 'headerRefreshing') {
            vm.pageNo = 1;
        } else {
            vm.pageNo++;
        }
        var url = 'courseWare/findMyBuyCourseWareList';
        var params = {
            publishStatus: vm.tabActive+1,
            pageNo: vm.pageNo,
            pageSize: vm.pageSize
        };
        var callback = function (data) {
            if (vm.pageNo == '1') {
                vm.listData = [];
            }
            vm.listData = vm.listData.concat(data.listData);
            vm.loadEnd = true;
            // status 为200时,只返回data
        };
        var error = function (res) {
            // status 不是200时,全部返回
            api.refreshHeaderLoadDone();
        };
        POST(url, params, callback, error);
    }

    // 点击item
    function handleItem(item) {
        if(vm.tabActive == 0) {
            fnOpenPublicWin(item.courseWareName, 'video/courseware_detail', {
                kjId: item.courseWareId
            });
        }
    }

    // 删除item
    function deleteItem(item, index) {
        current = item;
        currentIndex = index;
        fnOpenAlert({
            alertType: '26',
            alertConfirmFn: 'confirmDelete'
        });
    }

    // 确认删除
    function confirmDelete() {
        var params = {
            id: current.id
        };
        var url = 'courseWare/deleteMyBuyCourseWare';
        var callback = function(data) {
            fnToast('删除成功');
            vm.listData.splice(currentIndex, 1);
        };
        POST(url, params, callback);
    }
</script>

</html>